<template>
	<div class="system-sysOrg-dialog-container">
		<el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" width="769px">
			<el-form ref="sysOrgDialogFormRef" :model="state.ruleForm" size="default" label-width="90px" :rules="rules">
				<el-row :gutter="35">
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-form-item label="上级机构" prop="parentId">
<!--							<el-cascader-->
<!--								:options="state.sysOrgData"-->
<!--								:props="{ checkStrictly: true, value: 'id', label: 'title' }"-->
<!--								placeholder="请选择机构"-->
<!--								clearable-->
<!--								class="w100"-->
<!--								v-model="state.ruleForm.parentId"-->
<!--							>-->
<!--								<template #default="{ node, data }">-->
<!--									<span>{{ data.title }}</span>-->
<!--									<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>-->
<!--								</template>-->
<!--							</el-cascader>-->
              <el-tree-select
                  v-model="state.ruleForm.parentId"
                  :data="state.sysOrgData"
                  :render-after-expand="true"
                  style="width: 500px"
                  check-strictly
                  filterable
              />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="机构名称" prop="orgName">
							<el-input v-model="state.ruleForm.orgName" placeholder="请输入机构名称" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="机构别名">
							<el-input v-model="state.ruleForm.aliasClassName" placeholder="请输入机构别名" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="排序" prop="orderNo">
							<el-input-number v-model="state.ruleForm.orderNo" :min="0" :max="999" controls-position="right" placeholder="请输入排序" class="w100" />
						</el-form-item>
					</el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="机构类型" prop="orgType">
              <el-select v-model="state.ruleForm.orgType" placeholder="请选择" clearable class="w100" >
                <el-option label="分类节点"  :value="1"></el-option>
                <el-option label="省、自治区、直辖市"  :value="2"></el-option>
                <el-option label="地级市"  :value="3"></el-option>
                <el-option label="旗县区"  :value="4"></el-option>
                <el-option label="教育局"  :value="5"></el-option>
                <el-option label="教育局科室"  :value="6"></el-option>
                <el-option label="学校"  :value="7"></el-option>
                <el-option label="学校科室"  :value="8"></el-option>
                <el-option label="教育阶段"  :value="9"></el-option>
                <el-option label="年级"  :value="10"></el-option>
                <el-option label="班级"  :value="11"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20" v-if="state.ruleForm.orgType==7">
            <el-form-item label="学校类型" prop="schoolType">
              <el-select v-model="state.ruleForm.schoolType" placeholder="请选择" clearable class="w100" >
                <el-option label="九年一贯制（小学+初中）"  :value="1"></el-option>
                <el-option label="完全中学"  :value="2"></el-option>
                <el-option label="六年制（小学）"  :value="3"></el-option>
                <el-option label="三年制（初中）"  :value="4"></el-option>
                <el-option label="三年制（高中）"  :value="5"></el-option>
                <el-option label="幼儿园"  :value="6"></el-option>
                <el-option label="特殊教育学校"  :value="7"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="用户状态">
              <el-select v-model="state.ruleForm.isDelete" placeholder="请选择"  class="w100" :disabled="state.ruleForm.isDelete==0">
                <el-option label="启用"  :value="0"></el-option>
                <el-option label="禁用"  :value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
				</el-row>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel" size="default" >取 消</el-button>
					<el-button type="primary" @click="onSubmit(sysOrgDialogFormRef)" size="default">{{ state.dialog.submitTxt }}</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup lang="ts" name="sysOrgDialog">
import { reactive, ref } from 'vue';
import { systemApi } from "/@/api/system";
import {ElMessage, FormInstance, FormRules} from "element-plus";
// 定义子组件向父组件传值/事件
const emit = defineEmits(['refresh']);
const {saveOrUpdate} = systemApi();
// 定义变量内容
const sysOrgDialogFormRef = ref();

const rules = reactive<FormRules<any>>({

  orgName: [
    {
      required: true,
      message: '请输入机构名称',
      trigger: 'blur',
    },
  ],
  orderNo: [
    {
      required: true,
      message: '请输入排序',
      trigger: 'blur',
    },
  ],
  parentId: [
    {
      required: true,
      message: '请选择上级机构',
      trigger: 'change',
    },
  ],

  orgType: [
    {
      required: true,
      message: '请选择机构类型',
      trigger: 'change',
    },
  ],
  schoolType: [
    {
      required: true,
      message: '请选择学校类型',
      trigger: 'change',
    },
  ],

})

const state = reactive({
	ruleForm: {
    id: '',
    orgName: '',
    aliasClassName: '',
    orderNo: 1,
    parentId: '',
    orgType: 1,
    schoolType: 1,
    isDelete: 0,
	},
	sysOrgData: [] as OrgTreeType[], // 部门数据
	dialog: {
		isShowDialog: false,
		type: '',
		title: '',
		submitTxt: '',
	},
});

// 打开弹窗
const openDialog = (type: string, row: OrgTreeType,tableData: OrgTreeType[]) => {
	if (type === 'edit') {
    state.ruleForm.id = row.id;
		state.ruleForm.orgName = row.title;
    state.ruleForm.aliasClassName = row.aliasClassName;
    state.ruleForm.orderNo = row.orderNo;
    state.ruleForm.parentId = row.parentId;
    state.ruleForm.orgType = row.orgType;
    state.ruleForm.schoolType = row.schoolType;
    state.ruleForm.isDelete = row.isDelete;
    state.sysOrgData = tableData;
		state.dialog.title = '修改机构';
		state.dialog.submitTxt = '修 改';
	} else {
    state.sysOrgData = tableData;
		state.dialog.title = '新增机构';
		state.dialog.submitTxt = '新 增';
    clearForm();
		// 清空表单，此项需加表单验证才能使用
		// nextTick(() => {
		// 	deptDialogFormRef.value.resetFields();
		// });
	}
	state.dialog.isShowDialog = true;
	getMenuData();
};
// 关闭弹窗
const closeDialog = () => {
	state.dialog.isShowDialog = false;
};
// 取消
const onCancel = () => {
	closeDialog();
};
// 提交
const onSubmit = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      const res = await saveOrUpdate(state.ruleForm);
      if (res.status === 200) {
        ElMessage.success('更改成功');
      }
      closeDialog();
      emit('refresh');

    }
  })


};
// 初始化部门数据
const getMenuData = () => {

};
const clearForm = () => {
	state.ruleForm = {
    id: '',
    orgName: '',
    aliasClassName: '',
    orderNo: 1,
    parentId: '',
    orgType: 1,
    schoolType: 1,
    isDelete: 0,
	};
};
// 暴露变量
defineExpose({
	openDialog,
});
</script>
